<template>
    <!--  图册管理的  缩率图展示-->
    <div>
        <!--        上面总计多少条-->
        <div class="total">
            <img src="../../assets/images/Shape@2x.png" alt="">
            <p>总计：{{this.$store.state.total}}条记录</p>
        </div>
        <!--        利用循环渲染方式创建缩率图-->
        <ul class="list">
            <li v-for="(item,index) in newList" :key="index" class="text" @click="block(index)">
                <img :src="`data:image/gif;base64,${item.thumbnail}`" alt="" class="pic">
                <p>{{item.fileName}}</p>
                <!--                正常状态下隐藏-->
                <!--                重命名-->
                <div class="changename" @click="bl(index)">
                    <div>
                        <div>
                            <span>重命名</span>
                            <input type="text" v-model="value">
                        </div>
                        <a-button type="primary" class="btn" @click="cheng(index)">
                            确认
                        </a-button>
                        <a-button class="btn" @click="quxiao(index)">取消</a-button>
                    </div>
                </div>
                <div class="prompt prompt1">
                    <div></div>
                    <ul>
                        <li @click="chakan(index)">
                            <span>重命名</span>
                        </li>
                        <li>
                            <span>
                                  <a-button type="dashed" @click="del(item.id)" class="btn">
                                      删除
                                  </a-button>
                            </span>
                        </li>
                        <li>
                            <span><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=3&fileName=${item.fileName}&id=${item.id}`">下载</a></span>
                        </li>
                        <li>
                            <span><router-link :to="{path:'/galDateView',query:{atlasId:item.id,newItem:item}}">查看</router-link></span>
                        </li>
                    </ul>
                </div>

            </li>
        </ul>
        <!--       删除的弹出框 -->
        <a-modal
                v-model="visible"
                title="提示"
                cancelText="取消"
                okText="确认"
                @ok="handleOk"
        >
            <p>您确定要删除吗</p>
        </a-modal>

        <!--        下面的共多少条数据，第多少页-->
        <div class="paging">
            <p>共<span>{{this.$store.state.total}}</span>条数据，第 {{this.$store.state.pageNum}}/{{Math.ceil(this.$store.state.total /18)}} 页</p>
            <!--            分页-->
            <!--            分页-->
            <a-pagination :current="this.$store.state.pageNum" :total="(Math.ceil(this.$store.state.total / 18)*10)" @change="onChange" />
        </div>
    </div>
</template>

<script>
    // changeNameGal,
    import {changeNameGal, delGallery, getAllGalList,} from "../../api/api";
    // import axios from "axios"
    let cha = document.getElementsByClassName("changename")
    let list = document.getElementsByClassName("prompt")
    export default {
        name: 'Home',
        props: ["title"],
        data() {
            return {
                data: "block",
                current:1,
                value: "",
                visable: false,
                visible: false,
                id:"",
            }
        },
        created() {

           this.visable = true

        },
        computed:{
            newList(){
                return this.$store.state.searchGalList
            }
        },
        watch:{

        },
        methods: {
            //删除
            del(id){
                this.id = id
                this.visible = true
            },
            handleOk() {
                delGallery(this.id).then(res=>{
                    console.log(res)
                })
            },
            handleCancel(e) {
                console.log(e);
                this.visible = false;
            },
            // 分页
            onChange(current) {
                this.current = current;
                this.$store.commit("changePageNum",this.current)
                getAllGalList(this.current,18,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                    this.$store.commit("changeSearchGalList",res.page.list)
                    this.$store.commit("changePTotal",res.page.total)
                })

            },
            showDeleteConfirm(id) {
                this.$confirm({
                    title: '确认删除',
                    content: '确认删除该文件吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        console.log('OK');
                        delGallery(id).then(res=>{
                            console.log(res)
                            getAllGalList(this.current,18,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                                this.$store.commit("changeSearchGalList",res.page.list)
                                this.$store.commit("changePTotal",res.page.total)
                                this.$message.success('删除成功');
                            })
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
            },

            bl(index) {
                if (list[index].style.display === "block") {
                    list[index].style.display = "none"
                } else {
                    for (let i = 0; i < list.length; i++) {
                        list[i].style.display = "none"
                    }
                    list[index].style.display = "block"
                }
            },
            chakan(index) {
                if (cha[index].style.display === "block") {
                    cha[index].style.display = "none"
                } else {
                    for (let j = 0; j < cha.length; j++) {
                        cha[j].style.display = "none"
                    }
                    cha[index].style.display = 'block'
                }
            },
            //重命名
            cheng(index) {
                if (this.value === "") {
                    alert("请输入要修改的名字")
                } else {
                    changeNameGal(this.newList[index].id, this.value).then(res => {
                        this.value=''
                        console.log(res)
                        getAllGalList(this.current,18,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                            this.$store.commit("changeSearchGalList",res.page.list)
                            cha[index].style.display = 'none'
                            this.$store.commit("changePTotal",res.page.total)

                        })
                    })
                }
            },
            quxiao(index) {
                if (cha[index].style.display === "block") {
                    cha[index].style.display = "none"
                } else {
                    for (let j = 0; j < cha.length; j++) {
                        cha[j].style.display = "none"
                    }
                    cha[index].style.display = 'none'
                }
            },
            block(index) {
                // 获取单击事物的索引
                // 通过索引让指定的提示框显示
                // 首先判断提示框是不是显示单击重复的话会隐藏

                if (list[index].style.display === "block") {
                    list[index].style.display = "none"
                } else {
                    for (let i = 0; i < list.length; i++) {
                        list[i].style.display = "none"
                    }
                    list[index].style.display = "block"
                }
            },
        },
        components: {}
    }
</script>
<style scoped lang="less">
    .total {
        margin-top: 16px;
        width: 1088px;
        height: 40px;
        overflow: hidden;
        background: #E6F7FF;
        border: 1px solid #BAE7FF;
        border-radius: 4px;

        img {
            width: 14px;
            height: 14px;
            /*background: #1890FF;;*/
            float: left;
            margin: 13px 8px 13px 16px;
        }

        p {
            width: 112px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            float: left;
            margin-top: 9px;
        }
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-bottom: 4px;
        padding-left: 0;
        border-bottom: 1px solid #E8E8E8;
        position: relative;

        .text {
            width: 150px;
            height: 168px;
            /*background: #E9E9E9;*/
            border-radius: 4px;
            margin-right: 16px;
            position: relative;

            .pic {
                width: 150px;
                height: 102px;
                margin: 9px auto;
            }

            p {
                text-align: center;
                width: 150px;
                height: 44px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                line-height: 22px;
            }

            .prompt {
                position: absolute;
                z-index: 100;
                top: 89px;
                left: 107px;
                display: none
            }
        }

        li:nth-child(1),
        li:nth-child(7),
        li:nth-child(13) {
            margin-left: 13px;
        }
    }

    /*分页*/
    .paging {
        position: absolute;
        bottom: 0;
        width: 1088px;
        height: 64px;
        line-height: 34px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        p {
            width: 164px;
            height: 22px;
            float: left;
            margin-top: 21px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            margin-bottom: 0;
        }

        .ant-pagination {
            margin-top: 16px;
        }

    }


    .prompt {
        width: 140px;
        height: 159px;
        position: relative;

        div {
            width: 18px;
            height: 18px;
            border-top: 1px solid #D8D8D8;
            border-left: 1px solid #D8D8D8;
            background: #FFFFFF;
            position: absolute;
            top: 0;
            left: 20px;
            transform: rotate(45deg);
        }

        ul {
            width: 140px;
            height: 150px;
            margin-top: 9px;
            background: #FFFFFF;
            border: 1px solid #D8D8D8;
            border-radius: 4px;
            box-shadow: 0px 4px 16px 0px rgba(225, 225, 225, 0.5);
            list-style: none;
            padding: 0;
            cursor: pointer;

            li {
                width: 138px;
                height: 32px;
                padding: 6px 13px 6px 23px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                line-height: 20px;

                img {
                    float: right;
                    margin-top: 7px;
                    display: none;
                }
            }

            li:nth-child(1) {
                margin-top: 9px;
                z-index: 100;
                margin-left: 0;
            }

            li:nth-of-type(2) {
                padding: 0;
            }

            li:hover {
                background: #F5F5F5;
                color: rgba(0, 0, 0, 0.65);

                .ant-btn {
                    background: #F5F5F5;
                    color: rgba(0, 0, 0, 0.65)
                }
            }
        }
    }

    /*    删除的样式*/
    .ant-btn-dashed {
        border: none;
    }

    .ant-btn {
        box-shadow: none;
        height: 32px;
        text-align: left;
        padding: 0;
        width: 138px;
        padding-left: 23px;
        transition: none;
    }

    .ant-btn-dashed:hover, .ant-btn-dashed:focus {
        background: #F5F5F5;
        color: rgba(0, 0, 0, 0.65);
        border-color: #40a9ff;
    }

    /*    重命名*/
    .changename {
        display: none;
        width: 360px;
        height: 180px;
        background: #FFFFFF;
        border: 1px solid #C3C1C1;
        border-radius: 4px;
        position: fixed;
        z-index: 100;
        top: 300px;
        left: 700px;
        text-align: center;

        div {
            margin-top: 40px;

            span {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                color: rgba(0, 0, 0, 0.25);
                margin-right: 10px;
            }

            input {
                width: 214px;
                height: 32px;
                padding: 0 16px 0 16px;
                outline: none;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
    }

    .btn {
        width: 64px;
        height: 32px;
        padding: 0;
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
    }
    .btn {
        width: 64px;
        height: 32px;
        padding: 0;
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
    }
    /deep/.ant-btn-dashed {
        margin: 0!important;
        width: 138px;
        text-align: left;
        padding-left: 23px;
    }
</style>
